{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Installation"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!pip install ipyvizzu\n",
    "# pip install pandas"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### SSL Certification (Optional)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ssl\n",
    "ssl._create_default_https_context = ssl._create_unverified_context"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Import Dependencies\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "from ipyvizzu import Chart, Data, Config, Style"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Data Load"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# https://www.kaggle.com/datasets/rajkumarpandey02/fifa-world-cup-attendance-19302022\n",
    "df = pd.read_csv('FIFA World Cup Attendance.csv',dtype={\"Year\": str})\n",
    "df = df[:-1]\n",
    "df"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Data Object of Ipyvizzu "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "data = Data()\n",
    "data.add_data_frame(df)\n",
    "# type(data)\n",
    "\n",
    "display(df)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Style Sheet"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "\n",
    "example_style = {\n",
    "    \"plot\": {\n",
    "            \"yAxis\": {\n",
    "                \"label\": {\n",
    "                    \"fontSize\": \"1em\",\n",
    "                    \"paddingRight\": \"1.2em\",\n",
    "                },\n",
    "                \"title\": {\"color\": \"#ffffff00\"},\n",
    "            },\n",
    "            \"xAxis\": {\n",
    "                \"label\": {\n",
    "                    \"angle\": \"2.5\",\n",
    "                    \"fontSize\": \"1.1em\",\n",
    "                    \"paddingRight\": \"0em\",\n",
    "                    \"paddingTop\": \"1em\",\n",
    "                },\n",
    "                \"title\": {\"fontSize\": \"0.8em\", \"paddingTop\": \"2.5em\"},\n",
    "            },\n",
    "        },\n",
    "        \"logo\": {\"width\": \"5em\"},\n",
    "    }\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Create a Chart Object\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "chart = Chart(width=\"800px\", height=\"500px\")\n",
    "chart.animate(data)\n",
    "\n",
    "chart.animate(\n",
    "    Config(\n",
    "        {\n",
    "            \"x\": \"Year\",\n",
    "            \"y\": [\"Total_Attendance\",\"Hosts\"],\n",
    "            \"label\": \"Matches\",\n",
    "            \"title\": \"1. Area chart\",\n",
    "            \"geometry\": \"area\",\n",
    "            \"color\": \"Hosts\",\n",
    "            \n",
    "        }\n",
    "    ),\n",
    "    Style(example_style\n",
    "         ),\n",
    ")\n",
    "# print(type(chart))\n",
    "snapshot1 = chart.store()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "chart.animate(\n",
    "Config(\n",
    "            {\n",
    "                \"split\": True,\n",
    "                \n",
    "                \"title\": \"2.Split Area\",\n",
    "            }\n",
    "        )\n",
    ")\n",
    "snapshot2 = chart.store()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "chart.animate(\n",
    "Config({\"split\": False,\n",
    "        \"title\": \"3.Bar chart\",\n",
    "        \"geometry\": \"rectangle\",\n",
    "       \n",
    "       })\n",
    ")\n",
    "\n",
    "snapshot3 = chart.store()\n",
    "\n",
    "chart.animate(Data.filter(\"record.Hosts == 'Uruguay' || record.Hosts == 'Qatar' \"),\n",
    "         Config(\n",
    "            {\n",
    "                \"title\": \"4. Zoom to Specific Elements\",\n",
    "            }\n",
    "         ))\n",
    "\n",
    "snapshot4 = chart.store()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "chart.animate(Data.filter(None),\n",
    "    Config( {\n",
    "            \"x\": [\"Year\",\"Matches\"],\n",
    "            \"y\": [\"Total_Attendance\"],\n",
    "            \"color\": \"Hosts\",\n",
    "            \"size\": [\"Total_Attendance\"],\n",
    "            \"label\": \"Hosts\",\n",
    "            \"title\": \"Bubble Plot\",\n",
    "            \"geometry\": \"circle\",\n",
    "        \n",
    "        }),\n",
    "              \n",
    "        style={\"duration\": 2, \"delay\": 4},\n",
    ")\n",
    "\n",
    "snapshot5 = chart.store()\n",
    "               \n",
    "chart.animate(\n",
    "    Config.bubble({\n",
    "                    \"size\": [\"Total_Attendance\"],\n",
    "                    \"color\": \"Hosts\",\n",
    "                    \"title\": \"5. Show Share of Components (%)\",\n",
    "            }))\n",
    "\n",
    "\n",
    "snapshot6 = chart.store()\n",
    "chart.animate( \n",
    "    Config.treemap(\n",
    "            {\n",
    "                \"size\": \"Total_Attendance\",\n",
    "                \"color\": \"Hosts\",\n",
    "                \"title\": \"8. Treemap\",\n",
    "            }\n",
    "        )\n",
    "\n",
    ")\n",
    "snapshot7 = chart.store()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "chart.animate(snapshot1)\n",
    "chart.animate(snapshot2)\n",
    "chart.animate(snapshot3)\n",
    "chart.animate(snapshot4)\n",
    "chart.animate(snapshot5)\n",
    "chart.animate(snapshot6)\n",
    "chart.animate(snapshot7)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.2"
  },
  "vscode": {
   "interpreter": {
    "hash": "aee8b7b246df8f9039afb4144a1f6fd8d2ca17a180786b69acc140d282b71a49"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
